<template>
    <div class="sdy-hot">
        <div class="top">
            <span>京东秒杀</span>
            <span>14</span>
            <van-count-down @finish="tip" :time="subTime">
                <template #default="timeData">
                    <span class="block">{{ timeData.hours }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.minutes }}</span>
                    <span class="colon">:</span>
                    <span class="block">{{ timeData.seconds }}</span>
                </template>
            </van-count-down>
        </div>
        <div class="bottom">
            <ul>
                <li v-for="item in hotList" :key="item.proid">
                    <img :src="item.img1" alt="">
                    <span>￥{{ item.originprice }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script name="sdyHot" lang="ts" setup>
import { showToast } from 'vant'
import { onMounted, ref } from 'vue'
import { getHotList } from '../../../model/goods'

// 准备一个目标时间
const targetTime = new Date('2023/7/10 17:00:00')
// 计算当前时间和目标时间之间的时间差
const subTime = targetTime.getTime() - new Date().getTime()
// 倒计时结束提示
const tip = () => {
    showToast({
        message: '秒杀已经结束了',
        icon: 'like-o'
    })
}

// 定义一个接口
interface HotGoodsInfo {
    img1?: string
    proid?: string
    originprice?: number
    [key: string]: any
}

interface Response {
    code: string,
    data: Array<HotGoodsInfo>
}
const hotList = ref<Array<HotGoodsInfo>>([])

// 发请求-热门商品列表
onMounted(async () => {
    const res = await getHotList()
    if ((res as unknown as Response).code !== '200') return
    hotList.value = res.data
})

</script>

<style lang="scss" scoped>
.sdy-hot {
    height: 130px;
    background-color: #fff;
    width: 95%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    >.top {
        height: 40px;
        background-image: url();
        background-size: 100%;
        background-repeat: no-repeat;
        display: flex;
        align-items: center;

        >span {

            &:first-child {
                margin: 0 10px 0 20px;
            }

            &:last-of-type {
                margin-right: 15px;
            }
        }
    }

    >.bottom {
        flex: 1;
        box-sizing: border-box;
        padding-left: 10px;
        overflow: auto;

        >ul {
            display: flex;

            >li {
                width: 50px;
                height: 70px;
                margin-right: 5px;
                display: flex;
                flex-direction: column;
                align-items: center;

                >img {
                    width: 50px;
                    height: 50px;
                    display: block;
                }

                >span {
                    font-size: 12px;
                    margin-top: 10px;
                    color: red;
                }
            }
        }
    }
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: red;

}

.block {
    display: inline-block;
    border-radius: 5px;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: red;
}
</style>